<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ pluginDisplayName }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div [hidden]="!onlineUpdateOk || actionComplete || releaseNotesShow" id="plugin-log-output" class="modal-body"></div>
  @if (actionComplete) {
  <div class="modal-body plugin-modal-body">
    @if (justUpdatedPlugin) {
    <div class="mb-3 text-center">
      <i class="far fa-check-circle primary-text" style="font-size: 75px"></i>
    </div>
    <h5 class="text-center mb-3">{{ this.pastTenseVerb }}: {{ pluginDisplayName }} ({{ targetVersionPretty }})</h5>
    @if (!isDisabled) {
    <p
      class="mb-3 text-center grey-text"
      [innerHTML]="'plugins.manage.github_support' | translate: { iconStar, iconThumbsUp }"
    ></p>
    @if (childBridges.length === 0) {
    <p class="text-center mb-0">{{ 'plugins.settings.restart_required' | translate }}</p>
    } @if (childBridges.length > 0) {
    <p class="text-center mb-0">{{ 'restart.child_bridges' | translate }}</p>
    } } }
  </div>
  } @if (!onlineUpdateOk) {
  <div class="modal-body">
    <div class="mb-3 text-center">
      <i
        class="fas primary-text"
        [ngClass]="{
          'fa-arrow-alt-circle-down': action === 'Install',
          'fa-code-compare': action === 'Update' && installedVersion,
          'fa-arrow-alt-circle-up': action === 'Update' && !installedVersion,
          'fa-trash': action === 'Uninstall',
        }"
        style="font-size: 75px"
      ></i>
    </div>
    <ul class="mb-3">
      <li>{{ 'plugins.manage.online_updates' | translate }}</li>
      <li>{{ 'plugins.manage.manual_update_command' | translate }}</li>
    </ul>
    <pre class="p-2 mb-0">
hb-service stop
npm install -g {{ pluginName }}&#64;{{targetVersion}}
hb-service start</pre
    >
  </div>
  } @if (releaseNotesShow && !actionComplete && onlineUpdateOk) {
  <div class="modal-body plugin-modal-body">
    <div class="mb-3 text-center">
      <i
        class="far primary-text"
        [ngClass]="{
          'fa-arrow-alt-circle-down': action === 'Install' && !installedVersion,
          'fa-code-compare': action === 'Install' && installedVersion,
          'fa-arrow-alt-circle-up': action === 'Update',
          'fa-trash': action === 'Uninstall',
        }"
        style="font-size: 75px"
      ></i>
    </div>
    @if (latestVersion) {
    <h5 class="mb-4 text-center">
      @if (installedVersion) {
      <span>v{{ installedVersion }} &rarr; </span>
      } {{ targetVersionPretty }}
    </h5>
    }
    <ul ngbNav #nav="ngbNav" [(activeId)]="releaseNotesTab" class="nav-tabs px-0">
      <li [ngbNavItem]="1" class="w-50 m-0">
        <button ngbNavLink class="w-100 release-tab">{{ 'plugins.manage.notes' | translate }}</button>
        <ng-template ngbNavContent>
          <div class="alert release-notes p-3 pb-1 my-0">
            @if (action === 'Update' && !versionNotesLoaded) {
            <div class="w-100 text-center primary-text mt-3 mb-4">
              <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
            </div>
            } @else { @if (versionNotes) {
            <markdown class="plugin-md" [data]="versionNotes" />
            } @else { @if (versionNotesShow) {
            <div class="w-100 text-center grey-text mt-3 mb-4">{{ 'plugins.manage.notes_none' | translate }}</div>
            } @else { @if (targetVersion.includes('beta') || targetVersion.includes('alpha') ||
            targetVersion.includes('next')) {
            <div class="w-100 text-center grey-text mt-3 mb-4">
              {{ 'plugins.manage.notes_beta_1' | translate: { pluginName: pluginDisplayName } }}<br />
              {{ 'plugins.manage.notes_beta_2' | translate }}<br />
              {{ 'plugins.manage.notes_beta_3' | translate }}<br />
            </div>
            } @else {
            <div class="w-100 text-center grey-text mt-3 mb-4">{{ 'plugins.manage.notes_latest' | translate }}</div>
            } } } }
          </div>
        </ng-template>
      </li>
      <li [ngbNavItem]="2" class="w-50 m-0">
        <button ngbNavLink class="w-100 release-tab">{{ 'plugins.manage.changelog' | translate }}</button>
        <ng-template ngbNavContent>
          <div class="alert release-notes p-3 pb-1 my-0" style="border-top-left-radius: 0; border-top-right-radius: 0">
            @if (action === 'Update' && !fullChangelogLoaded) {
            <div class="w-100 text-center primary-text mt-3 mb-4">
              <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
            </div>
            } @else { @if (fullChangelog) {
            <markdown class="plugin-md" [data]="fullChangelog" />
            } @else {
            <div
              class="w-100 text-center grey-text mt-3 mb-4"
              [innerHTML]="'plugins.manage.changelog_none' | translate"
            ></div>
            } }
          </div>
        </ng-template>
      </li>
    </ul>
    <div [ngbNavOutlet]="nav" class="mt-2"></div>

    @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName)) {
    <div class="mt-4 mb-0">
      <p class="w-100 text-center mb-1 small">
        <span class="grey-text">{{ 'plugins.manage.backup' | translate }}</span>
        <a href="javascript:void(0)" (click)="downloadBackupFile()"><i class="fa fa-download mx-1"></i></a>
      </p>
      <p class="w-100 text-center mb-0 small grey-text">{{ 'plugins.manage.hb_restart' | translate }}</p>
    </div>
    }
  </div>
  } @if (!onlineUpdateOk || actionComplete || releaseNotesShow || actionFailed) {
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      @if ((!justUpdatedPlugin && onlineUpdateOk) || (justUpdatedPlugin && (!isDisabled || actionFailed))) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-center">
      @if ((justUpdatedPlugin && isDisabled && !actionFailed || !onlineUpdateOk)) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-end">
      @if (onlineUpdateOk && releaseNotesShow) {
      <button type="button" class="btn btn-primary" (click)="update()">{{ 'form.button_continue' | translate }}</button>
      } @if (justUpdatedPlugin && !isDisabled) {
      <button
        type="button"
        class="btn btn-primary"
        (click)="childBridges.length > 0 ? onRestartChildBridgeClick() : onRestartHomebridgeClick()"
      >
        {{ 'menu.tooltip_restart' | translate }}
      </button>
      } @if (actionFailed) {
      <button class="btn btn-primary" (click)="downloadLogFile()">{{ 'form.button_download' | translate }}</button>
      }
    </div>
  </div>
  }
</div>
